<template>
  <!-- 工艺审批 -->
  <el-dialog width="900px" :close-on-click-modal="false" :title="title" @close="close" :visible.sync="visible" append-to-body class="first">
    <el-form :model="basics" ref="form">
      <el-row class="information">
        <el-col :span="7">
          <el-form-item label="图号" label-width="120px" prop="name">
            <el-input class="w-100percent" readonly v-model="basics.drawingNumber" placeholder="自动填充"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="产品名称" label-width="120px" prop="type">
            <el-input v-model="basics.name" readonly class="w150" placeholder="BL1901" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="数量" label-width="120px" prop="number">
            <el-input v-model="basics.number" class="w150" readonly clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div>
      <el-collapse accordion @change="activeChange">
        <template v-for="version in this.versionIdList">
          <el-collapse-item v-if="version.versionState == '待审核'" :name="version.versionId" :key="version.versionId">
            <template slot="title">
              <span class="w300">工艺版本：{{ version.versionName }}</span>
              <span>状态：{{ version.versionState }}</span>
            </template>
            <el-table class="mt0" border stripe :span-method="merge" :data="activeData" row-key="sid" default-expand-all :tree-props="{ children: 'equipmentList', hasChildren: 'hasChildren' }">
              <el-table-column prop="sequenceNumber" label="工序号" align="right" width="80"></el-table-column>
              <el-table-column prop="processName" label="工序名称" align="left" width="110"></el-table-column>
              <el-table-column prop="single" label="单双机(单)" align="center" width="100">
                <template slot-scope="scope">
                  <el-switch v-if="scope.row.department == '加工'" v-model="scope.row.single" active-color="#13ce66" disabled></el-switch>
                  <!--      <el-input v-model="scope.row.remark"></el-input>-->
                </template>
              </el-table-column>
              <el-table-column prop="department" label="部门/执行" align="center" width="120"></el-table-column>
              <el-table-column prop="equipment" label="设备/供应商" align="center" width="120"></el-table-column>
              <el-table-column prop="debugHour" label="定额工时" align="center" width="110"></el-table-column>
              <el-table-column prop="quotaHour" label="调试工时" align="center" min-width="110"></el-table-column>
            </el-table>
          </el-collapse-item>
        </template>
      </el-collapse>
    </div>
    <el-form class="mt10" :model="formDetail">
      <el-row>
        <el-form-item label="审核" class="w-100percent bold bg-lightGray"></el-form-item>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="审批结论" label-width="120px" prop="result">
            <el-select v-model="formDetail.result" class="w150" placeholder="请选择审批结论" clearable filterable>
              <el-option label="同意" value="1"></el-option>
              <el-option label="不同意" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="审批意见" label-width="120px" prop="remark">
            <el-input type="textarea" :row="1" v-model="formDetail.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="close">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { State, namespace } from 'vuex-class'

const vuexProcess = namespace('TwoProcess')

@Component({
  components: {}
})
export default class DialogDetail extends Vue {
  public $refs!: {
    form: any
  }
  @vuexProcess.State processDetailList: any
  @vuexProcess.State versionIdList: any

  title: string = '工艺审批'
  visible: boolean = false

  formDetail: any = {
    id: '',
    result: '',
    remark: ''
  }
  rules: any = {
    result: [{ required: true, message: '请选择审批结论', trigger: 'change' }]
  }

  basics: any = {
    name: '',
    drawingNumber: '',
    number: ''
  }
  processList: any[] = []

  open(id: string) {
    this.formDetail.id = id

    // this.title = "审核";
    if (this.processDetailList.length > 0) {
      //  console.log('you')

      if (this.processDetailList[0].processList.length) {
        // console.log('list')
        this.processList = this.processDetailList[0].processList
      } else {
        this.processList = []
      }
    } else {
      this.processList = []
    }

    // this.addpid()
    this.visible = true
  }

  /**
   * 判断数组或者对象是否为空
   *
   * */
  isEmpty(obj) {
    if (!obj && obj !== 0 && obj !== '') {
      return true // 检验 undefined 和 null
    } else if (Array.prototype.isPrototypeOf(obj) && obj.length === 0) {
      return true
    } else if (Object.prototype.isPrototypeOf(obj) && Object.keys(obj).length === 0) {
      return true
    } else {
      return false
    }
  }
  getData(drawingNumber: string, name: string, number: Number) {
    this.basics.drawingNumber = drawingNumber
    this.basics.name = name
    this.basics.number = number
  }
  save() {
    if (!this.formDetail.result) {
      this.$alert('请输入审批结论！', '操作提示', {
        confirmButtonText: '确定',
        type: 'warning'
      })
    } else {
      const reviewData = {
        producingId: 0,
        result: true,
        remark: ''
      }
      reviewData.producingId = this.formDetail.id
      reviewData.remark = this.formDetail.remark
      if (this.formDetail.result == 1) {
        reviewData.result = true
      } else {
        reviewData.result = false
      }
      // console.log('id',typeof(reviewData.id),'re',typeof(reviewData.result))
      this.$emit('first-review', { ...reviewData })
    }
  }

  //折叠面板
  activeData: any = []
  activeChange(versionId: any) {
    console.log('name', versionId)
    let arr = this.processDetailList
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].versionId === versionId) {
        this.activeData = arr[i].processList
        this.addid()
        break
      }
    }
  }
  addid() {
    let i
    let sid = 0
    for (i = 0; i < this.activeData.length; i++) {
      //一级添加sid
      let parent = this.activeData[i]
      let parentkey = 'sid'
      let parentvalue = ++sid
      parent[parentkey] = parentvalue

      if (this.activeData[i].equipmentList.length) {
        let child = this.activeData[i].equipmentList
        for (let c = 0; c < child.length; c++) {
          //二级添加sid
          let obj = child[c] //或者 var obj=new Object();

          let key = 'sid'
          let value = ++sid
          obj[key] = value
        }
      } else {
        let obj = this.activeData[i] //或者 var obj=new Object();//{}
        let equipment = 'equipment'
        let values = this.activeData[i].supplier
        obj[equipment] = values
      }
    }
    // console.log('加id' + this.product)
  }

  merge({ row, column, rowIndex, columnIndex }) {
    // console.log('查看', row, row.equipment)

    if (!row.sequenceNumber) {
      if (columnIndex === 0) {
        return [1, 3]
      } else if (columnIndex === 1) {
        return [0, 0]
      } else if (columnIndex === 2) {
        return [0, 0]
      }
    }
  }

  close() {
    this.$refs.form.resetFields()
    this.formDetail = {
      id: '',
      result: ''
    }
    this.rules = {
      result: [{ required: true, message: '请选择审核结论', trigger: 'change' }]
    }

    this.basics = {
      name: '',
      drawingNumber: '',
      number: ''
    }
    this.processList = []
    this.visible = false
  }
}
</script>

<style lang="scss" scoped>
</style>
